import CanvasComponent, { CanvasComponentOptions } from "./CanvasComponent";

export default class Progress extends CanvasComponent {

  percent?: number
  borderColor?: string
  backgroundColor?: string
  color?: string

  constructor(options:  CanvasComponentOptions & {
    percent?: number
    borderColor?: string
    backgroundColor?: string
    color?: string
  }) {
    super(options)
    this.percent = options.percent ?? 0
    this.borderColor = options.borderColor
    this.backgroundColor = options.backgroundColor
    this.color = options.color
    this.height = options.height ?? 10
  }


  async draw(context: CanvasRenderingContext2D, dt: number): Promise<void> {
    var percent = Math.min(Math.max(this.percent ?? 0, 0), 100)
    // background
    context.fillStyle = this.backgroundColor ?? 'transparent'
    context.strokeStyle = this.borderColor ?? 'rgba(255,255,255,0.15)'
    context.fillRect(this.screenX, this.screenY, this.width, this.height)
    context.strokeRect(this.screenX, this.screenY, this.width, this.height)

    // progress
    context.fillStyle = this.color ?? 'rgba(255,255,255,0.15)'
    context.fillRect(this.screenX, this.screenY, this.width * percent / 100, this.height)
  }

  setPercent(value: number) {
    this.percent = value
  }
} 